<form class="layui-form" action="" lay-filter="admin">
    <table id="demo" class="layui-hide" lay-filter="role"></table>
</form>
<!--用于序号列 递增，（但表头type: 'numbers'也可以）-->
<script type="text/html" id="num">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-checked layui-btn-xs" lay-event="editPermission">权限编辑</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--注意：上面使用的表单，内部的其他按钮 不要使用button-->
        <a class="layui-btn layui-btn-sm" lay-event="add">添加角色</a>
    </div>
</script>
<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use(['table','form','layer'], function () {
        let form = layui.form,
            table = layui.table,
            layer = layui.layer;

        // layer.prompt({title: '输入任何口令，并确认', formType: 1,closeBtn: 0,
        //     btn2: function() {//这里就是你要的
        //         return false ;//开启该代码可禁止点击该按钮关闭
        //     },
        // }, function(pass, index){
        //     if(pass==='8888'){
        //         layer.close(index);
        //         layer.msg('密码通过');
        //     }else {
        //         layer.msg('密码错误', {icon: 2,time: 1200});
        //     }
        // });

        //第一个实例
        let tableInit = table.render({
            elem: '#demo'
            , height: 'full-160' //高度最大化减去差值
            , url: '/admin/loadPage' //数据接口
            , toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器 并开启自带工具
            , method : 'get' // http请求类型 默认get
            , contentType: 'application/x-www-form-urlencoded'
            , response : {
                /*
                    默认规定的数据格式为
                    {
                      "code": 0,
                      "msg": "",
                      "count": 1000,
                      "data": [{}, {}]
                    }
                    现在借助response 重新规定返回的数据格式
                */
                statusName : 'code'
                , statusCode : 1
            }
            , done: function (res, curr, count) { /* 表格自适应 */
                $("table").css("width", "100%");
            }, parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
            , cols: [[ //表头
                {type: 'checkbox'}
                , {title: '序号',type: 'numbers', width: 80, sort: true}
                , {field: 'roleName', title: '名称'}
                , {field: 'roleCode', title: 'code'}
                , {title:'操作', width:120,toolbar: '#barDemo'}
            ]]
            , page: true //开启分页
        });


        //头工具栏事件
        table.on('toolbar(role)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,//2（iframe层）
                        title: "添加买家",
                        scrollbar: false,
                        area:[($(window).width() - 50)+'px', ($(window).height() - 50) +'px'],
                        content: "/admin/addRoleView",
                        end: function () {
                            tableInit.reload();
                        }
                    });
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(role)', function(obj){
            let data = obj.data;
            if(obj.event === 'editPermission'){
                layer.open({
                    type: 2,//2（iframe层）
                    title: "权限编辑",
                    scrollbar: false,
                    area: ['80%', '80%'],
                    content: "/admin/editPermissionView",
                    success:function(dom){//父页面向子页面传值
                        let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();
                        $iframeDom.find("#roleId").val(data.roleId);
                    }
                });
            }
        });
    });
    /*]]>*/
</script>
